Продолжаем серию уроков посвященных редактированию стандартного шаблона Joomla 3, имя которому Protostar. С редактированием шаблонов мы уже познакомились на предыдущих уроках и делали следующее:
- Поговорили о том, из чего состоит любой шаблон на Joomla
- Научились работать с кодом страницы и файлами стилей
- Создали шапку для нашего сайта
- Оформили область контента
Данный урок мы посвятим оформлению правого меню, а так же создадим красивую кнопку «Наверх», которая будет вести в начало страницы.
Редактирование оформления правого меню на сайте
Первым делом начнем с меню в правой части страницы, ведь его стандартное оформление в шаблоне Protostar оставляет желать лучшего:
Оформлять внешний вид модуля меню в правой части страницы будем как всегда при помощи CSS. Но для начала необходимо определить из чего состоит меню, и какие классы применены к его элементам. Не буду вдаваться в подробности как это сделать, об этом мы говорили в соответствующем уроке.
Для начала давайте уберем серый фон и рамку модулей в правой части страницы (position-7). Как выяснилось, за цвет фона модуля отвечает контейнер с классом «well»:
Чтобы от него избавиться применим к контейнеру <div> с классом «well» всего два стиля:
background-color: transparent; border: none;
Эти стили уже прописаны в стандартном файле template.css в строках 2173 и 2174 и их тут же можно подправить. Но так как у меня подключен новый файл стилей (как это сделать мы говорили в данном уроке), чтобы не потерять изменения при обновлении Joomla, я буду записывать все стили в него. Однако в моем случае придется к каждому стилю дописать свойство «!important» чтобы повысить их приоритет.
Не важно, какой из методов вы выбрали - изменить стили в стандартном файле либо написать в новом, в результате фон модуля будет прозрачным, а рамка исчезнет.
После этого я применил к данному контейнеру еще несколько стилей – подправил отступы и убрал тень сверху, они реально не нужны. В результате код получился таким:
.well {/*Правое меню - убираем отступ, не отбрасываем тень, цвет фона прозрачный, рамки нет (по умолчанию все это есть)*/
padding: 0 0 5px 5px !important; /*отступы снизу и слева по 5 пикселей*/
box-shadow: none !important; /*убираем тень*/
background-color: transparent !important; /*цвет фона прозрачный*/
border: none !important; /*Рамки нет*/
}
Теперь модули, в том числе и меню в правой части страницы выглядят следующим образом (для наглядности в модуле меню я скрыл некоторые пункты):
Меню несколько преобразилось, но выглядит все так же не красиво, оно и понятно, мы толком то ничего и не поменяли. Продолжаем редактирование, на этот раз поменяем оформление заголовков модулей, в том числе и меню. Для этого к заголовкам добавим следующие стили:
.well h3.page-header { /*Заголовок модулей в правой части страницы*/
margin: 0; /*отступы внешние*/
padding: 11px; /*отступы внутренние*/
border: none; /*рамки нет*/
border-radius: 25px 25px 25px 0; /*скругление краев*/
background-color: #005E8D; /*цвет фона*/
color: #fff; /*цвет текста*/
text-align: center; /*выравнивание по центру*/
}
Следом добавим стили к пунктам меню, для начала обведем их небольшой рамкой слева и снизу и добавим отступы:
ul.nav.menu {/*Обводка пунктов меню*/
border-left: 1px solid #005E8D;
border-bottom: 1px solid #005E8D;
border-radius: 0 0 0 15px;
margin: -10px 0;
padding: 10px 0 10px 10px;
}
Теперь напишем стили, чтобы текущий пункт меню выделялся из общей массы (под текущим пунктом меню подразумевается тот, который активен в данный момент), и точно так же выделялись бы пункты меню при наведении:
ul.nav.menu > li.current > a {/*Выделяем текущий пункт меню первого уровня*/
font-weight: 600; /*жирный*/
padding: 5px; /*отступы по 5 пикселей*/
}
ul.nav.menu ul.nav-child li.current { /*Выделение вложенных текущих пунктов меню*/
font-weight: 600;
border-bottom: 2px solid #4CAF50; /*рамка снизу*/
}
ul.nav.menu li a:hover {/*стили при наведении на пункт меню*/
font-weight: 600;
text-decoration: none; /*убираем подчеркивание*/
background-color: transparent; /*убираем фон (по умолчанию присутствует)*/
}
Сохраняем файл стилей и переходим на наш сайт, перезагружаем страницу (на всякий случай с очисткой кэша Ctrl+F5) и смотрим на результат:
Теперь наше меню выглядит более привлекательным. Точно таким же образом можно создавать меню любой сложности, главное в этом деле знание CSS, а результат зависит только от Вашей фантазии.
Оформляем навигатор сайта (хлебные крошки)
По умолчанию оформление модуля хлебных крошек вполне сносное, но все же тут есть над чем поработать:
Для начала избавимся от ссылки «Главная» просто потому что мне так больше нравится (убирать или оставить это на Ваше усмотрение). Открываем модуль для редактирования и ставим переключатель «Показывать главную» в положение «Нет».
Теперь переходим непосредственно к стилям, по аналогии с меню убираем у навигатора цвет фона, добавляем нижнюю рамку и т.д.
Стили для оформления хлебных крошек на сайте:
/*Хлебные крошки*/
.breadcrumb {
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
border-radius: 0 !important;
border-bottom: 3px solid #fd8e32;
}
ul.breadcrumb li {margin: 5px 0;}
.breadcrumb li a, .breadcrumb li span {font-size: 15px;}
Результат изменения оформления навигатора сайта:
Делаем красивую кнопку «Наверх» для нашего сайта
Теперь настало время самого интересного – создание в шаблоне Joomla собственной кнопки, которая будет вести в начало страницы. Данный процесс несколько сложнее, нам потребуется вносить изменения в индексный файл шаблона, в файл стилей и кроме того написать небольшой скрипт который будет обрабатывать событие при нажатии на нашу кнопку.
Вариантов создания подобных кнопок достаточно много, есть варианты без использования JavaScript либо jQuery, но их применение делает результат гораздо эффективнее. К примеру, мы можем настроить плавный переход, плавное исчезновение кнопки, когда она не нужна и т.д.
Изначально данный процесс может показаться трудоемким, но это совсем не так, сейчас постараюсь все наглядно объяснить.
Первое что нам надо будет сделать, это внести изменения в индексный файл шаблона – создать дополнительный контейнер для нашей кнопки.
Внесение изменений в индексный файл шаблона
Открываем файл index.php и пролистываем его практически до конца. Ищем комментарий <!-- Footer -->, а перед ним несколько закрывающихся тегов </div>. Между этими тегами вставляем новый совершенно пустой блок с идентификатором «toTop»:
<div id="toTop"></div>
Он у нас получится вложенным в блок с классом «body». Чтобы стало понятнее, смотрите на скриншот с кодом:
Сохраняем и закрываем файл index.php, он нам больше не понадобится.
Стили для кнопки «Наверх»
Блок для кнопки мы создали, но его на сайте не видно, потому что он не имеет никакого содержимого да оно нам и не нужно. Сейчас напишем несколько стилей для того чтобы кнопка приобрела очертания:
/*Кнопка "Наверх"*/
div#toTop {
border-radius: 25px; /*делаем окружность*/
width: 50px; /*шириной 50 пикселей*/
height: 50px; /*и такой же высотой*/
right: 15px; /*отступ справа*/
bottom: 15px; /*отступ снизу*/
position: fixed; /*фиксированная позиция (кнопка всегда будет в одном и том же месте)*/
cursor: pointer; /*при наведении на кнопку стрелка мыши превращается в указатель*/
display: none; /*по умолчанию кнопка скрыта (до того пока пользователь не начнет пролистывать страницу и её не подхватит скрипт)*/
background-image: url(../img/toTop.png); /*изображение для кнопки*/
box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.7); /*тень для пущей важности*/
}
Сохраняем и закрываем файл стилей. Если перейти на сайт то и сейчас кнопку Вы не заметите, все потому что мы прописали в стилях свойство display: none. Сделали мы это для того чтобы изначально, когда пользователь еще не успел пролистать страницу кнопку не было видно, ведь в это время она и не нужна.
Скрипт для кнопки «Наверх»
Теперь самое интересное – написание собственного скрипта, который будет отображать нашу кнопу, когда пользователь начнет пролистывать документ и скрывать ее, когда страница в самой верхней точке. Кроме того напишем обработчик события при нажатии пользователем на кнопку.
Файл со скриптами имеет расширение «.js» и находится в папке js нашего шаблона. В шаблоне Protostar в данной попке уже имеется не один, а сразу три файла скриптов - application, classes и template. В данный момент нас интересует последний.
Открываем файл template.js и смотрим на его содержимое. Не пугайтесь, разбираться в его коде нам не придется, мы просто добавим в него свой код, который я постараюсь как можно доступнее расписать.
Между строками кода 58 и 59 вставляем следующий код:
/*Обработчик кнопки "Наверх"*/
$(function(){$(window).scroll(function() /*запускаем функцию*/
{/*Условие*/
if($(this).scrollTop()!=0){$('#toTop').fadeIn();}/*Если документ пролистали, то показываем кнопку*/
else{$('#toTop').fadeOut();}/*в противном случае кнопка скрыта*/
});
$('#toTop').click(function() /*обработка события при нажатии на кнопку*/
{
$('body,html').animate({scrollTop:0},800); /*плавный переход в начало страницы в миллисекундах */
});
});
/*Конец кнопки*/
Скрипт не сложный, к тому же по комментариям можно понять, что за что отвечает. Если Вам потребуется сделать переход еще более плавным, то измените число миллисекунд с 800 до 2000 к примеру. В результате за указанный промежуток времени страница будет пролистана с текущего положения до начала.
Для наглядности как всегда выкладываю скриншот файла скрипта:
Теперь сохраняем файл и смотрим на результат, а результат такой – изначально кнопки нет, а как только вы начнете листать страницу, она появляется. После нажатия на кнопку страница плавно переходит к началу и точно так же плавно кнопка исчезает.
Окончательный результат страницы у меня получился таким:
Урок подошел к концу, в заключение хочу сказать, что редактирование стандартных шаблонов достаточно не сложный процесс и порой лучше отредактировать стандартный шаблон Joomla, чем искать и устанавливать сторонние шаблоны с других сайтов.
